<template>
  <view>
    <view class="placeholder-view"></view>
    <view class="bottom-view pt-12 pb-16 px-24">
      <view v-if="ticketDetail?.ticketType === TicketTypeEnum.CHARGE" class="mb-12 disFlxAC">
        <text class="ali-icon fz-28" style="color: #f43e06">&#xe6b2;</text>
        <text class="fz-16 ml-8" style="color: #292928">{{ totalPrice }}</text>
        <text v-if="ticketDetail?.tagName" class="fz-16 ml-8" style="color: #f43e06">
          已减{{ favorablePrice }}
        </text>
        <view class="fz-14 disFlxAC flexEnd" style="flex: 1; color: #f43e06" @click="openPopup()">
          <text>明细</text>
          <text class="ali-icon ml-4 fz-16">&#xe67e;</text>
        </view>
      </view>
      <TButton
        text="提交报名"
        type="primary"
        class="gutter-btn"
        custom-class="h-44 linh-44 br-22 px-16"
        @click="emits('submit')"
      />
    </view>
    <!-- 价格明细 -->
    <UniPopup
      ref="priceDetailRef"
      backgroundColor="#fff"
      :borderRadius="borderRadius"
      :z-index="999"
      @maskClick="handleMaskClick"
    >
      <view class="popup-content" :style="{ borderRadius }">
        <view class="h-48 disFlxCC fz-16 popup-title">
          <text>优惠详情</text>
        </view>
        <view class="popup-detail pa-12">
          <view class="pa-12 fz-14 br-8" style="background-color: #fff; color: #333333">
            <view class="disFlxJS mb-12">
              <text class="fz-18">优惠详情</text>
            </view>
            <view class="disFlxJS mb-12">
              <text>报名单价</text>
              <text>{{ formatMoney({ money: ticketDetail?.price || 0 }) }}</text>
            </view>
            <view class="disFlxJS mb-12">
              <text>报名数量</text>
              <text>{{ purchaseQuantity }}</text>
            </view>
            <view class="disFlxJS mb-12">
              <text>费用总价</text>
              <text>{{ (ticketDetail?.price || 0) * purchaseQuantity }}</text>
            </view>
            <view v-if="ticketDetail?.tagName" class="disFlxJS mb-12" style="color: #ea5e0e">
              <text>{{ ticketDetail?.tagName }}</text>
              <text>-{{ favorablePrice }}</text>
            </view>
            <view class="disFlxJS mb-12" style="color: #ea5e0e">
              <text>合计需付</text>
              <text>{{ totalPrice }}</text>
            </view>
          </view>
        </view>
      </view>
    </UniPopup>
  </view>
</template>

<script setup lang="ts">
  import type { IActivityTicketResult } from '@/api/activity/types';
  import TButton from '@/components/TButtonGroup/TButton.vue';
  import UniPopup from '@/uni_modules/uni-popup/components/uni-popup/uni-popup.vue';
  import { TicketTypeEnum } from '@/enums/activityStatusEnum';
  import { formatMoney } from '@/utils/number';
  import { propTypes } from '@/utils/propTypes';
  import { ref, type PropType, watchEffect, getCurrentInstance } from 'vue';
  import { isNullOrUnDef } from '@/utils/is';
  import { isNumber } from 'lodash-es';

  const borderRadius = ref('32rpx 32rpx 0px 0px');

  const _this = getCurrentInstance();
  const openPopup = (direction: string = 'bottom') => {
    emits('update:visible', true);
    (_this?.refs['priceDetailRef'] as any).open(direction);
  };

  const props = defineProps({
    ticketDetail: Object as PropType<IActivityTicketResult>,
    purchaseQuantity: propTypes.number.def(1),
    visible: propTypes.bool.def(false),
  });

  const emits = defineEmits(['update:visible', 'submit']);

  const totalPrice = ref<string>();
  const favorablePrice = ref<string>();

  watchEffect(() => {
    const { purchaseQuantity, ticketDetail } = props;
    const num = purchaseQuantity;
    if (ticketDetail?.ticketType === TicketTypeEnum.CHARGE) {
      const originalPrice = ticketDetail.price;
      const discountPrice = ticketDetail.discountPrice;
      const price = isNumber(discountPrice) ? discountPrice : originalPrice;
      totalPrice.value = formatMoney({
        money: price * num,
      });

      if (!isNullOrUnDef(discountPrice) && originalPrice > discountPrice) {
        favorablePrice.value = formatMoney({
          money: originalPrice * num - discountPrice * num,
        });
      }
    }
  });

  function handleMaskClick() {
    emits('update:visible', false);
  }
</script>

<style lang="scss" scoped>
  .bottom-view {
    position: fixed;
    bottom: 0;
    background-color: #fff;
    width: 100%;
    box-sizing: border-box;
    box-shadow: 0px -4rpx 24rpx 0px rgba(150, 151, 153, 0.16);
    z-index: 10;
  }

  .placeholder-view {
    height: 264rpx;
    background-color: #fff;
  }

  .popup-content {
    background-color: #f2f3f5;
    overflow: hidden;
    .popup-title {
      width: 100%;
      color: #292928;
      background-color: #fff;
    }
    .popup-detail {
      min-height: 40vh;
    }
  }
</style>
